<template>
  <div class="active-detail">
    <!-- 主图 -->
    <!-- <img :src="activeDetail.mainFile.url" class="main-pic" mode="widthFix"> -->
    <div class="lunobo" v-if="mainPicList.length > 0">
      <van-swipe  :autoplay="2000" :style="`height:${$toRem(200)};`">
        <van-swipe-item v-for="(image, index) in mainPicList" :key="index">
          <img ref="swipeImgRef" :src="image.path" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="distance">
      <!-- 标题 -->
      <div class="btitle">{{ activeDetail.marketingName }}</div>
      <!-- 浏览与分享 -->
      <div class="brow-share">
        <div class="bs-box">
          <div class="brow">浏览{{ activeDetail.browse }}次</div>
          <!-- <div class="share">分享{{ activeDetail.shareNum }}次</div> -->
        </div>
        <div class="status" v-if="activeStatus" :class="{'no-join-color': !canJoin}">{{ activeStatus }}</div>
      </div>
      <!-- 时间与地点 -->
      <div class="time-place">
        <div class="time">
          <img src="../assets/time.png" class="icon">
          <div class="time-txt">活动时间：{{ activeDetail.startTime }}~{{ activeDetail.endTime }}</div>
        </div>
        <div class="place">
          <img src="../assets/place.png" class="icon">
          <div class="time-txt">活动地点：{{ activeDetail.address }}</div>
        </div>
      </div>
    </div>
    <div class="color-line"></div>
    <div class="distance">
      <!-- 详情部分 -->
      <div class="inner-detail">
        <div class="inner-title">活动详情</div>
        <div class="inner-desc">{{ activeDetail.synopsis }}</div>
        <div class="wraper" v-if="allPic.length > 0">
          <img
            :src="item.url"
            class="inner-pic"
            mode="widthFix"
            v-for="(item,index) in allPic"
            :key="index"/>
        </div>
      </div>
    </div>
    <!-- 分享与参与 -->
    <div class="join" style="height: 65px;">
      <!-- <div class="share-btn">
        <img src="../assets/share.png" class="share-icon">
        <div class="share-txt">分享</div>
      </div> -->
      <div v-if="joinBtnText" class="join-us" @click="nowJoinClick" :class="{'no-join-color': !canJoin}">{{ joinBtnText }}</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { GetDetail } from '../http/api.js'
import moment from 'moment'

export default {
  name: 'ActiveDetail',
  components: {},
  data () {
    return {
      activeDetail: {},
      mainPicList: [],
      allPic: [],
      swiperHeight: ((document.body.clientWidth > 750 ? 750 : document.body.clientWidth) / 375) * 300,
      startTime: '',
      endTime: ''
    }
  },
  computed: {
    activeStatus () {
      if (!this.isDuringDate(this.activeDetail.startTime, this.activeDetail.endTime)) {
        return '未开始'
      }

      if (this.activeDetail && this.activeDetail.isEnd === 0) {
        return '进行中'
      }

      return ''
    },

    canJoin () {
      // isAdd 0 不能添加  1 正常使用
      // isEnd  1 活动结束或者禁用 0 正常使用
      return this.activeDetail && this.activeDetail.isAdd === 1 && this.activeDetail.isEnd === 0 && this.isDuringDate(this.activeDetail.startTime, this.activeDetail.endTime)
    },

    joinBtnText () {
      if (this.activeDetail) {
        if (this.activeDetail.isEnd === 1) {
          return '已结束'
        }

        if (this.activeDetail.isAdd === 0) {
          return '已参与'
        }
        if (!this.isDuringDate(this.activeDetail.startTime, this.activeDetail.endTime)) {
          return '活动未开始'
        }
        return '立即参与'
      }
      return ''
    }
  },

  created () {
    this.getActiveDetail()
    this.initSwiperSize()
  },

  mounted () {
    if (window.innerWidth >= 1000) {
      setTimeout(() => {
        this.$refs.swipeImgRef.forEach(img => {
          img.style.objectFit = 'contain'
        })
      }, 1000)
    } else {
      this.$refs.swipeImgRef.forEach(img => {
        img.style.objectFit = 'cover'
      })
    }
  },
  methods: {
    initSwiperSize () {
      let that = this
      // if (window.innerWidth >= 1000) {
      //   that.$nextTick(() => {
      //     that.$refs.swipeImgRef.forEach(img => {
      //       img.style.objectFit = 'contain'
      //     })
      //   })
      // } else {
      //   that.$refs.swipeImgRef.forEach(img => {
      //     img.style.objectFit = 'cover'
      //   })
      // }
      // swipeImgRef
      window.addEventListener('resize', function () {
        // 获取当前窗口的宽度和高度
        if (window.innerWidth >= 1000) {
          that.$refs.swipeImgRef.forEach(img => {
            img.style.objectFit = 'contain'
          })
        } else {
          that.$refs.swipeImgRef.forEach(img => {
            img.style.objectFit = 'cover'
          })
        }
      })
    },
    /**
     * 进入立即参加
     */
    nowJoinClick () {
      if (this.canJoin) {
        this.$router.push({
          path: '/joinInfo',
          query: {
            marketingId: this.activeDetail.enMarketingId,
            currentUserId: this.activeDetail.currentUserId
          }
        })
      }
    },

    /**
     * 获取详情
     */
    getActiveDetail () {
      this.$toast.loading({
        mask: true,
        duration: 0,
        message: '加载中...'
      })
      var params = this.$route.query
      params.device = localStorage.getItem('device')
      console.log(localStorage.device, localStorage)
      console.log(params)
      GetDetail(params).then((res) => {
        console.log('接口原始返回:', res) // 重点检查这里
        this.$toast.clear()
        const data = res || {}
        this.activeDetail = data
        if (data.marketingName) {
          document.title = data.marketingName
        }
        this.startTime = this.activeDetail.startTime ? this.activeDetail.startTime.slice(0, 16).replace(/-/g, '.') : '无'
        this.endTime = this.activeDetail.endTime ? this.activeDetail.endTime.slice(0, 16).replace(/-/g, '.') : '无'
        this.mainPicList = data.mainFileList || []
        console.log('图片内容', this.mainPicList)

        this.allPic = data.detailFileList || []
      }).catch(() => {
        this.$toast.loading({
          mask: false
        })
      })
    },

    // 判断当前时间是否处于活动时间段
    isDuringDate (beginDateStr, endDateStr) {
      var curDate = moment()
      var beginDate = moment(beginDateStr)
      var endDate = moment(endDateStr)
      return curDate.isAfter(beginDate) && curDate.isBefore(endDate)
    }
  }
}
</script>

<style lang="scss" scoped>
// .lunobo {
//   position: relative;
//   width: 100%;
//   /* 给轮播容器一个明确高度 */
//   height: 300px;
// }
// html {
//   font-size: 20px; /* 原默认16px，增大基准 */
// }
// 样式重置
// .van-swipe__track {
//   .van-swipe-item img {
//     width: 100%;
//   height: 100%;
//   object-fit: cover;
//   }
// }

.no-join-color {
  background: #e6e6e6 !important;
  color: #999 !important;
}

.active-detail {
  width: 100%;
  padding-bottom: 75px;
}

.distance {
  width: 100%;
  padding: 1.5vw 3vw 0; /* 原12.5px 18px */
  box-sizing: border-box;
}

//   标题
.btitle {
  font-size: 13.5px;
  color: #111111;
  margin-bottom: 7.5px;
  line-height: 22.5px;
  text-align: left;
}

//   浏览与分享
.brow-share {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bs-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size:13.5px;
  color: #999999;
}

.brow {
  font-size:16px;
  margin-right: 20px;
}

.status {
  background: rgba(35, 98, 251, 1);
  border-radius: 5px;
  color: #ffffff;
  text-align: center;
  font-size: 13px;
  padding: 5px 12.5px;
}

//   时间与地点
.time-place {
  padding-top: 17.5px;
  padding-bottom: 17.5px;
}

.time,
.place {
  display: flex;
  justify-content: flex-start;
  color: #111111;
  font-size:14px;
  text-align: left;
}

.time {
  margin-bottom: 7.5px;
}

.icon {
  width:14px;
  height:14px;
  margin-right: 7.5px;
  margin-top: 2px;
}

.time-txt {
  font-size: 14px;
  color: #111111;
}

.color-line {
  width: 100%;
  height: 12px;
  background: #f1f1f1;
}

//   详情部分
.inner-title {
  font-size: 14px;
  color: #111111;
  margin-top: 17.5px;
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.inner-title::before {
  width: 2.5px;
  height: 15px;
  content: "";
  display: inline-block;
  background: #2362fb;
  margin-right: 8px;
}

.inner-desc {
  font-size: 14px;
  color: #111111;
  text-align: justify;
  margin-bottom: 16.5px;
  line-height: 18px;
}

.inner-pic {
  // width: 100%;
  display: block;
}

//   分享与参与
.join {
  width: 100%;
  box-sizing: border-box;
  padding-left: 18px;
  padding-right: 18px;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}

.share-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 14px;
}

button {
  padding-left: 0 !important;
  padding-right: 0 !important;
  line-height: 17.5px !important;
  background-color: #fff !important;
}

button::after {
  border: 0 !important;
}

.button-hover {
  color: #333333 !important;
  background-color: #fff !important;
}

.join-us {
  width: 170px;
  height: 60px; /* 原34px */
  line-height: 26px;
  background: rgba(35, 98, 251, 1);
  border-radius: 5px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  padding: 16px 32px; /* 增大内边距 */
}

.share-txt {
  font-size:14px;
  color: #333333;
  margin-top: 5px;
}

.share-icon {
  width: 15px;
  height: 15px;
}
.van-swipe-item{
  img{
    width:100%;
    height:100%;
    Object-fit:cover;
  }
}
</style>
